﻿var imgWidth=20; //列表框中图片的宽度; 
var imgHeight=20; //列表框中图片的高度;     
var selectedNo=0; //默认选定的图片序号;     
var selecteSize=4; //下拉列表框中显示的图片数;     

var myHTML='<span onmouseover="isin=true" onmouseout="isin=false">';     
	myHTML+='<table width="0" onclick="showlist(this)" title="选择提示框" border="0" cellspacing="0" cellpadding="0"><tr><td><img name="imgselected" border=0 src="/images/treeIcon/'+imgSrc.replace("defaultIcon","treeIcon"+selectedNo)+'" width='+(imgWidth)+' height='+imgHeight+'></td><td valign=top><img src="../../images/Bottom.gif"></td></tr></table>';     
	myHTML+='<div onscroll="scrollud()" id="imgBox" \n';     
	myHTML+='style="position:absolute; left=-800; top=0; background-color:#FFFFFF; border:1px solid #000000; overflow-x:hidden; overflow-y:hidden; overflow-x:hidden;overflow-y:scroll; width:'+(imgWidth+35)+'px; height:'+imgHeight*selecteSize+'px">';     
for(i=0;i<12;i++){
	myHTML+="<img listID="+i+" src='../../images/treeIcon/"+imgSrc.replace(oldImgName, "treeIcon"+i)+"' alt='"+imgSrc.replace(oldImgName, "treeIcon"+i)+"' width="+imgWidth+" height="+imgHeight+"  onclick='selectme(this)' onload='if(init)init()'><br />";     
}     
myHTML+= "</div></span>";   
imgBox.outerHTML=myHTML;     

/* 以下控制下拉列表框的出现或隐藏   */
function showlist(obj){  
	// 如果列表框已经出现，这次点击则隐藏：     
	if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800; return;}     
	//读取选择提示框在窗体中的绝对位置：     
	//在父容器中的相对位置：     
	var mytop=obj.offsetTop;       
	var myleft=obj.offsetLeft;     
	// 依次读取父容器在更高一级父容器中的相对位置：       
	while(obj=obj.offsetParent){     
		myleft+=obj.offsetLeft;       
		mytop+=obj.offsetTop;       
	}     
	// 现在已经得到选择提示框的绝对位置myleft和mytop。     
	// 下拉列表拉就出现在这个绝对位置的正下方：     
	imgBox.style.left=myleft-12;     
	imgBox.style.top=mytop-12;     
}     

var isin=false;     
function selectme(obj){     
	// 这个函数将在窗体点击或选定图片时激活，窗体点击中传递的参数是null。     
	if(!isin||obj){imgBox.style.pixelLeft=-800;}   //隐藏列表框     
	if(obj){     
		//改变选择提示框中的图片和"headImage"输入框中的值：     
		//listID是对象的自定义属性，即在对象的标签中定义了这个属性值，现在就可以读取或改变。     
		markform.headImage.value="../../images/treeIcon/"+imgSrc.replace(oldImgName, "treeIcon"+obj.listID);     
		document.images["imgselected"].src="../../images/treeIcon/"+imgSrc.replace(oldImgName, "treeIcon"+obj.listID);     
	}  
}
    
/* 以下控制下拉列表框的自动滚动   */    
var mytime=setTimeout("",0);     
var pre_X=0;   //这个变量用来记录滚动前滚动条的位置     
function scrollud(){     
	// 本函数在下拉列表框滚动时被激活     
	var current_X=imgBox.scrollTop;   //记录函数激活时滚动条的位置     
	// 判断向上还是向下滚动，并自动滚动到"imgHeight"的整数倍。     
	// 我们改变列表框的scrollTop值时，会自动激发其onscroll事件，循环激活本函数。     
	if(current_X>pre_X && imgBox.scrollTop < Math.ceil(imgBox.scrollTop/imgHeight)*imgHeight){     
		clearTimeout(mytime);     
		mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop+1);",1);     
	}else if(current_X<pre_X && imgBox.scrollTop > Math.floor(imgBox.scrollTop/imgHeight)*imgHeight){     
		clearTimeout(mytime);     
		mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop-1);",1);     
	}     
	pre_X=current_X;
} 

//使列表框自动滚动到默认选定的图片位置，并给"headImage"输入框以默认值     
function init() {
	//本函数在每个列表框中的图片加载时激活     
	imgBox.scrollTop=selectedNo*imgHeight;     
	markform.headImage.value="../../images/treeIcon/"+imgSrc.replace(oldImgName, "treeIcon"+selectedNo);     
}     

/* 以下使窗体点击时selectme(obj)函数被激活：   */    
myActivation="selectme(null)";     
if(document.body.onclick){     
	eval(document.body.onclick.toString().replace('anonymous()','bodyclick()'));     
	document.body.onclick = new Function("bodyclick();"+myActivation);     
}else    
	document.body.onclick = new Function(myActivation); 
